<!--
 * @Author: wuzhen
 * @Date: 2019-12-04 17:56:54
 * @LastEditors  : wuzhen
 * @LastEditTime : 2020-01-11 10:13:12
 * @Description: 用户管理
 -->
<template>
  <Card style="width:100%" dis-hover>
    <p slot="title">
      <span class="primary">{{username}}</span>的好友
    </p>
    <p slot="extra">
      <router-link to="/userManagement">
        <Icon type="ios-arrow-back" /> 返回
      </router-link>
    </p>
    <wz-table ref="table" :search-api="searchApi" :columns="columns" :handle-btn="handleBtn">
      <template v-slot:action="slotProps">
        <Dropdown placement="bottom-start" @on-click="(e) => handleClick(e,slotProps.row)">
          <a href="javascript:void(0)">
            操作
            <Icon type="md-more" />
          </a>
          <DropdownMenu slot="list">
            <DropdownItem name="delete">删除好友</DropdownItem>
            <DropdownItem name="outblack" v-if="slotProps.row.relationship === 10">移出黑名单</DropdownItem>
            <DropdownItem name="toblack" v-if="slotProps.row.relationship === 20">加入黑名单</DropdownItem>
            <!-- <DropdownItem name="detail">查看用户</DropdownItem>
            <DropdownItem name="on">{{slotProps.row.status === 10?'帐户停用':'帐户启用'}}</DropdownItem>
            <DropdownItem name="offline" :disabled="slotProps.row.onlinestatus === 10">强制下线</DropdownItem>
            <DropdownItem name="offline">好友管理</DropdownItem>
            <DropdownItem name="offline">修改</DropdownItem> -->
          </DropdownMenu>
        </Dropdown>
      </template>
    </wz-table>
  </Card>
</template>
<script>
import index from "./mixins";
import { getUserFriendShip ,delFriend,updateBlackList} from "@/request/api";
export default {
  mixins: [index],
  data() {
    return {
      username: this.$route.query.username || "",
      userid: this.$route.params.id,
      searchApi: getUserFriendShip,
      apiParams: {
        flipper: {
          offset: 0,
          limit: 15,
          sort: "createtime desc"
        },
        userid: this.$route.params.id
      },
      type: "mobile",
      keyword: ""
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取table数据
    getData() {
      this.$refs.table.getData(this.apiParams);
    },
    handleClick(type, row) {
      this.id = row.userid;
      switch (type) {
        case 'delete':
          this.$Modal.warning({
            title: "友情提示",
            content: "确定要删除好友？",
            closable: true,
            onOk: () => {
              this.editOndelete(row);
            }
          });
          break;
        case 'outblack':
          this.$Modal.warning({
            title: "友情提示",
            content: "确定要移出黑名单？",
            closable: true,
            onOk: () => {
              this.editUpdateBlack(20,row);
            }
          });
          break;
          case 'toblack':
          this.$Modal.warning({
            title: "友情提示",
            content: "确定要加入黑名单？",
            closable: true,
            onOk: () => {
              this.editUpdateBlack(10,row);
            }
          });
          break;
        default:
          break;
      }
    },
    async editOndelete(row){
      try{
        const res =await delFriend({
           userid: row.userid,
           friendid:row.friendid
        })
        if (res.code === 200) {
          this.$Message.success("操作成功");
          this.getData();
        }
      } catch (err){
        throw err
      }
    },
    async editUpdateBlack(status,row){
      try{
        const res =await updateBlackList({
           userid: row.userid,
           friendid:row.friendid,
           status
        })
        if (res.code === 200) {
          this.$Message.success("操作成功");
          row.relationship=status;
        }
      } catch (err){
        throw err
      }
    }
  }
};
</script>
